<template>
  <div class="todo">
    <div class="todo-text">{{ todo.text }}</div>
    <div v-if="todo.isFinished">✅</div>
    <button v-else @click="finish(todo.id)">完成</button>
    <button @click="remove(todo.id)">删除</button>
  </div>
</template>
<script>
import { mapActions } from 'pinia'
import { useTodoStore } from '../stores/todoStore';

  export default {
    props:['todo'],
    methods:{
      ...mapActions(useTodoStore,['finishTodo','removeTodo']),
      finish(id){
        this.finishTodo(id)
      },
      remove(id){
        this.removeTodo(id)
      }
    }
  }
</script>
<style scoped>
.todo {
  display: flex;
  flex-direction: row;
  border: 1px solid #eee;
  padding: 10px;
}

.todo-text {
  width: 200px;
}
</style>
